<template>
  <div class="navbar">
    <el-menu
        :default-active="currentPath"
        router
        mode="horizontal"
        background-color="white"
        text-color="#222"
        active-text-color="red"
        style="min-width: 1300px;height: 65px">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
      <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">悠哉茶桌 - LowTea</span>
      <el-menu-item style="position: absolute;right: 0%">
        <Logout></Logout>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import Logout from "./Logout.vue";

export default {
  name: 'Menu',
  components: {Logout},
  data () {
    return {
      navList: [
        {name: '/post', navItem: '广场'},
        {name: '/bottle', navItem: '漂流瓶'},
        {name: '/userInfo', navItem: '个人信息'}
      ],
      keywords: ''
    }
  },
  computed: {
    hoverBackground () {
      return '#ffd04b'
    },
    currentPath () {
      let x = this.$route.path.indexOf('/', 1)
      if (x !== -1) {
        return this.$route.path.substring(0, x)
      } else {
        return this.$route.path
      }
    }
  },
  methods:{
    handler(){
      this.logout();
    }
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}

span {
  pointer-events: none;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
